import { useEffect, useState } from 'react';
import { Space, Badge } from 'antd';
import { BellOutlined } from '@ant-design/icons';
import React from 'react';
import { useModel } from 'umi';
import { formateDate } from '@/utils/dateUtil';
import Avatar from './AvatarDropdown';
import styles from './index.less';

export type SiderTheme = 'light' | 'dark';

const GlobalHeaderRight: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [date, setDate] = useState(formateDate(Date.now()))  

  useEffect(() => {
    console.log('开启定时器')
    const timer = setInterval(() => {
      console.log('进入定时器')
      // 注:在setCount中使用箭头函数是最好方式之一,只有一个timer生成
      setDate(() => formateDate(Date.now())) 
    }, 1000)
    return () => {
      console.log('清除定时器')
      clearInterval(timer)
    }
  }, []) //如果设置count依赖,会有多个timer生成,销毁

  if (!initialState || !initialState.settings) {
    return null;
  }

  const { navTheme, layout } = initialState.settings;
  let className = styles.right;

  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (
    <Space className={className}>
      {date}
      &nbsp; &nbsp; &nbsp;
      <Badge count={1} size="small">
        <BellOutlined style={{ paddingRight: '5px', fontSize: '20px' }} />
      </Badge>
      &nbsp; &nbsp; &nbsp;
      <Avatar />
    </Space>
  );
};
export default GlobalHeaderRight;
